<template>
  <div class="RecruiterLayout">
    <!-- 标题 -->
    <!--浏览记录管理-->
    <Title>
      <template #default>{{ title }}</template>
    </Title>
    <!-- 内容区 -->
    <section class="contentLayout">
      <el-card>
        <div class="nav">
          <el-tooltip
              class="box-item"
              effect="dark"
              content="刷新"
              placement="top"
          >
            <el-button :type="'text'" @click="Refresh"><el-icon size="19"><RefreshRight/></el-icon></el-button>
          </el-tooltip>
          <el-tooltip
              class="box-item"
              effect="dark"
              content="密度"
              placement="top"
          >
            <el-dropdown placement="bottom-start" trigger="click" size='large'>
              <el-button type="text"><el-icon size="18"><Sort/></el-icon></el-button>
              <template #dropdown>
                <el-dropdown-menu >
                  <el-dropdown-item
                      @click="changeSize('紧凑')"
                      :style="{backgroundColor:active1===true ?'#E6F7FF' : ''}">
                    紧凑
                  </el-dropdown-item>
                  <el-dropdown-item
                      @click="changeSize('默认')"
                      :style="{backgroundColor:active2===true ?'#E6F7FF' : ''}">
                    默认
                  </el-dropdown-item>
                  <el-dropdown-item
                      @click="changeSize('疏松')"
                      :style="{backgroundColor:active3===true ?'#E6F7FF' : ''}">
                    疏松
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-tooltip>
          <el-tooltip
              class="box-item"
              effect="dark"
              content="列设置"
              placement="top"
          >
            <el-button type="text"><el-icon size="18"><Setting/></el-icon></el-button>
          </el-tooltip>
        </div>
        <!--表格数据-->
        <el-table :data="getBrowseList.list" :size="tableSize" v-loading="loading" style="width: 100%">
          <el-table-column label="序号" prop="" type="index" width="100" align="center"  />
          <el-table-column label="用户名" prop="" min-width="150" align="center">
            <template #default="{row}">
              <span v-if="row.user">{{row.user.username}}</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column label="名称"  prop="" min-width="200" align="center">
            <template #default="{row}">
               <span v-if="row.company">
                 {{row.company.name}}
               </span>
              <span v-else-if="row.job">
                 {{row.job.position.name}}
              </span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column label="类型" prop="" min-width="150" align="center">
            <template #default="{row}">
              <el-button v-if="row.type===1" class="EnableBtn" size="small">浏览职位</el-button>
              <el-button v-else-if="row.type===0" class="BanBtn" size="small">浏览分行</el-button>
            </template>
          </el-table-column>
          <el-table-column label="编辑时间"  prop="" min-width="200" align="center">
            <template #default="scope">
              <span style="font-size: 14px;">{{$filters.formatDate(scope.row.createdAt)}}</span>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <div class="demo-pagination-block">
          <div class="pageText" style="float: left;margin: 5px 15px">
            第 {{AllPages.per_page*AllPages.page-14}} -
            <span v-if="AllPages.per_page*AllPages.page<=AllPages.total">{{AllPages.page*AllPages.per_page}}</span>
            <span v-else>{{AllPages.total}}</span>
            条/总共 {{ AllPages.total }} 条
          </div>
          <el-pagination
              :current-page="AllPages.page"
              :page-size="AllPages.per_page"
              :pager-count="3"
              background
              layout="prev, pager, next"
              :total="AllPages.total"
              size="small"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              style="margin-top: 3px"
          />
        </div>
      </el-card>
    </section>
  </div>
</template>

<script setup>
import {reactive,ref} from "vue";
import { useRouter, useRoute } from "vue-router";
import {GetBrowseList} from "@/network/BranchManagement";
import Title from "components/public/Title";
import {RefreshRight, Setting, Sort} from "@element-plus/icons-vue";
const router = useRouter();
const route = useRoute();
const title = route.meta.title;


//定义表格数据
const getBrowseList=reactive({
  list:[],
  total:0
})
//获取分页
const AllPages=reactive({
  page:1,
  per_page:15,
  total:0
})
//获取数据
const AllBrowseList=()=>{
  GetBrowseList(AllPages).then((res)=>{
    console.log(res,'rse1')
    console.log(res.data.data)
    const {list,total}=res.data.data
    getBrowseList.list=list
    getBrowseList.total=total
    AllPages.total=res.data.meta.total
    //loading加载启用和关闭判断
    if (res.data.code===0){
      setTimeout(()=>{
        loading.value=false
      },600)
    }else {
      loading.value=true
    }
  })
}
AllBrowseList()


//current-page 改变时触发
const handleCurrentChange = (val) => {
  AllPages.page=val
  loading.value=true
  AllBrowseList()
}
//page-size 改变时触发
const handleSizeChange = (val) => {
  AllPages.per_page=val
  AllPages.page=1
  loading.value=true
  AllBrowseList()
}

//loading区域加载
const loading = ref(true)
//刷新
const Refresh= () => {
  loading.value=true
  AllBrowseList()
}
//密度
const tableSize=ref('default')
const active1=ref(false)
const active2=ref(true)
const active3=ref(false)
const changeSize = (size) => {
  if (size === '紧凑') {
    tableSize.value = 'small'
    active1.value = true
    active2.value = false
    active3.value = false
  } else if (size === '默认') {
    tableSize.value = 'default'
    active1.value = false
    active2.value = true
    active3.value = false
  } else if (size === '疏松') {
    tableSize.value = 'large'
    active1.value = false
    active2.value = false
    active3.value = true
  } else {
    tableSize.value = 'default'
    active1.value = false
    active2.value = true
    active3.value = false
  }
}
</script>

<style scoped lang="scss">
.nav{
  height: 50px;
  float: right;
  /*刷新、密度、列设置样式*/
  :deep(.el-button--text){
    color: #1F1F1F;
    margin: 0 5px;
  }
  :deep(.el-button--text:hover){
    color:#409EFF;
  }
}
/*el-table部分样式*/
/*table表头*/
:deep(.el-table){
  font-weight: normal;
  color: var(--color-text);
}
:deep(.el-table .el-table__header th){
  background-color:var(--color-background-2);
  font-weight: normal;
  color: var(--color-text);
}
:deep(.el-table .el-table__header th>.cell){
  border-right: 1px solid #0000000f;
}
:deep(.el-table .el-table__header th:last-child>.cell){
  border-right: none;
}
:deep(.cell){
  line-height: 30px;
}
/*账号状态样式*/
.EnableBtn,.BanBtn{
  cursor: text;
}
:deep(.EnableBtn){
  color: #096dd9;
  background: #e6f7ff;
  border-color: #91d5ff;
}
:deep(.BanBtn){
  color: #389e0d;
  background: #f6ffed;
  border-color: #b7eb8f;
}
/*分页组件*/
.demo-pagination-block{
  height: 50px;
  float: right;
  padding-top: 10px;
}
</style>